logo-size = 60px
nav-left = 25px
logo-left = 100px

#header
    width 100%
    flex none
    position relative
    padding 0
    background-color color-white
    @media print
        display none
    &:after
        content ""
        position: absolute
        left 0
        top 0
        width 100%
        height 0.5px
        background-color color-light-gray

#header-inner
    display flex
    flex-flow row nowrap
    align-items center
    @media mq-mobile
        justify-content center

#logo-wrap
    flex 0 logo-size
    @media mq-normal
        margin-left logo-left

#logo
    hide-text()
    background url("/images/diversity.svg")
    width logo-size
    height logo-size
    background-size @width @height
    display block

#main-nav
    display none
    flex 1 auto
    padding-left nav-left
    @media mq-normal
        display block

.main-nav-li
    display inline-block
    line-height logo-size
    padding 0 nav-left
    margin 0

.main-nav-link
    position relative
    height auto
    color color-black
    text-decoration none
    line-height logo-size
    opacity 0.7
    transition 0.2s
    display inline-block
    &:hover, .active &
        opacity 1
        color color-link-hover

.main-nav-link
    &:after
        content ""
        position: absolute
        left 0
        bottom 0
        width 100%
        height 2px
        background-color color-link-hover
        opacity 0
        transition opacity 0.3s

.main-nav-link
    &:hover
        &:after
            opacity 1